<template>
	<view class="train">
		<nodata v-if="subjectlist.length==0"></nodata>
		 <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption" >
			<view class="pB50">
				<view class="topics p10 bg_white" v-for="(item,index) in subjectlist">
					<view class="topics-text">{{index+1}}、{{item.question}}</view>
					<view class="topics-operation pT10" :class="[operchanger?'':'topics-operation-ban']" >
						<view class="topics-del mR5" v-if="operchanger" @click="del(item.id)">删除</view>
						<view class="topics-modify mR5" v-if="operchanger" @click="modify(index)">修改</view>
						<view class="topics-details" @click="details(index)">详情</view>
					</view>
					<view class="topics-foot m10"></view>
				</view>
			</view>
		
		</mescroll-uni>
			    <!-- 请自行改写.item，以实现您要的效果-->
			   <!-- <ws-load-more ref="loadMore" @provider="provider" :pageSize="1" :pageNo="10">
			        <template v-slot:list="{ items }"> -->
						<!-- 此处为插槽，只能使用template或其他自定义component -->
			    <!--        <view class="solid-top topics p10" v-for="(item,index) in items" :key="index"> -->
			                <!-- 此处为每个元素的样式 -->

		<!-- 					<view class="topics-text">{{index+1}}.{{item.question}}</view>
							<view class="topq````````ics-operation">
								<view class="topics-del" @click="del(item.id)">删除</view>
								<view class="topics-modify" @click="modify(index)">修改</view>
								<view class="topics-details" @click="details(index)">详情</view>
						</view>
			            </view>
			        </template>
			    </ws-load-more>
				 -->

<!-- 		
		<view class="topics p10" v-for="(item,index) in subjectlist">
			<view class="topics-text">{{index+1}}.{{item.question}}</view>
			<view class="topics-operation">
				<view class="topics-del" @click="del(item.id)">删除</view>
				<view class="topics-modify" @click="modify(index)">修改</view>
				<view class="topics-details" @click="details(index)">详情</view>
			</view>
			<view class="topics-foot m10"></view>
		</view>
			 </mescroll-uni>

	</view>
	
		</view> -->
		<view class="btnapprow bg_white" v-if="operchanger">
			<view class="btn-row" @click="addproblem()"><button type="primary" class="primary " >添加问题</button></view>
		</view>
		<backnext nofooter='YES'></backnext>
		<!-- 底部导航 -->
		<footernav pagePath='user'></footernav>
		<!-- 加载动画 -->
		<loading v-if="!isloading()"></loading>
	</view>
	
	

</template>

<script>
	
	import {questionlist,questiondel} from "@/common/api/topics.js"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";

	export default {
		mixins: [MescrollMixin], // 使用mixin
		data() {
			return {
				userinfo:[],
				subjectlist:[],
				page:1,
				pageSize:10,
			
                pre:'item',
                failFlag:false,
                count:0,
				requestchanger:true,
				
				
				downOption:{
					auto: false
				},
				upOption:{
					auto:false
				},
				test:'',
				operchanger:false
			};
		},
		onLoad() {
			console.log("start request")
			/*请求培训题目列表*/
			// this.getquestionsList()
		},
		onShow(){
			this.page = 1
			if(this.requestchanger){
				this.subjectlist = []
				uni.getStorage({
					key: 'userinfo',
					success: res => {
						this.userinfo = res.data
						if(this.userinfo.roleid == 1 || this.userinfo.roleid == 2 ){
							this.operchanger = true
						}
					}
				});
				this.getquestionsList()
			}
			

			
		},
		
		methods:{			
				addproblem(){
					uni.navigateTo({
						url: './topicsAdd'
					});
				},
			
				backRefresh(){//返回刷当前页面
					this.page=1;
					this.getquestionsList();
				},
			/*下拉刷新的回调*/
				downCallback(){
					this.subjectlist=[];
					// this.page++
					this.page = 1
					var getdata ={
						'companyid':this.userinfo.companyid,
						'page':this.page,
						'pagesize':this.pageSize
						// keyword
					}
					questionlist(getdata).then(res=>{
						// this.subjectlist = res.data.data
						console.log(res)
						if(res.data.code==400){
							this.mescroll.endErr();
							this.requestchanger = false
							return
							}
						this.mescroll.endSuccess();
						for (let i = 0; i < res.data.data.length; i++) {
							this.subjectlist.push(res.data.data[i])
						}
							
					})		
				// 与 mescroll-body 的处理方式一致 > 
							},
			/*上拉加载的回调*/
				upCallback(page) {
				this.mescroll.endSuccess(this.subjectlist.length, this.requestchanger);
				// 与 mescroll-body 的处理方式一致 > 
				},
			
                /**核心 只需实现@provider事件
                    入参：e包含两个参数：pageNo和pageSize
                    请求完成后填充数据：this.$refs.loadMore.pushData(res)
                        成功:在获取数据成功后调用this.$refs.loadMore.pushData(res) res为数组，
                        失败:在获取数据失败后调用this.$refs.loadMore.pushData(res) res为null，
                */
                provider(e){
                    console.log(e);
                    var that = this;
					if(that.requestchanger == false){that.$refs.loadMore.pushData([]);return}
					console.log(that.requestchanger)
                    //模拟网络请求的延迟
					
                    setTimeout(function () {
                        //向插件传入当前页数据
					   that.page++
					   that.getquestionsList()
					   
                       that.$refs.loadMore.pushData(that.subjectlist);
                    }, 1000);
                },
			
			onNavigationBarButtonTap: function(e) {
				// this.requestchanger = false
				uni.navigateTo({
					url: './topicsAdd'
				});
			},
			
			getquestionsList(){
				var getdata ={
					'companyid':this.userinfo.companyid,
					'page':this.page,
					'pagesize':this.pageSize
					// keyword
				}
				questionlist(getdata).then(res=>{
					// this.subjectlist = res.data.data
					console.log(res)
					if(res.data.code==400){
						this.requestchanger = false
						return
						}
					this.page++
					for (let i = 0; i < res.data.data.length; i++) {
						this.subjectlist.push(res.data.data[i])
					}
						
				})
			},
			details(index){
				/*提取subjectlist 子项 传参*/	
				uni.navigateTo({
					url: './trainingDetails'+'?questionsinfo='+JSON.stringify(this.subjectlist[index])+'&optionsinfo='+JSON.stringify(this.subjectlist[index].options)
				});
			},
			modify(index){
				uni.navigateTo({
					url: './topicsModify'+'?questionsinfo='+JSON.stringify(this.subjectlist[index])+'&optionsinfo='+JSON.stringify(this.subjectlist[index].options)
				});
			},
			del(id){
				var _that = this
				uni.showModal({
				    title: '确定要删除此题?',
				    // content: '确定要删除此题？',
				    success: function (res) {
				        if (res.confirm) {
							/*请求*/
							questiondel({'id':id}).then(res=>{
								_that.requestchanger = true
								_that.page = 1
								if(res.data.code==200){
									uni.showToast({
									    title: '已删除',
									    duration: 2000
									});
									_that.subjectlist = []
									_that.getquestionsList()
									// this.backrefresh('')
								}
							})
				            // console.log('用户点击确定');
				        } else if (res.cancel) {
							return 
				            // console.log('用户点击取消');
				        }
				    }
				});

				
			}
		}
		}
</script>

<style lang="scss" scoped>
.train {
	width: 100%;
	.topics {
		margin: auto;
		width: 95%;
		margin-bottom: 10px;
	.topics-foot{
		border-bottom: 1px solid gray;
		opacity: 0.2;
	}
	}
	.topics-operation {
		
		justify-content: flex-end;
		// width: 65%;
		margin-left: auto;
		display: flex;
		uni-view {
			width: 77px;
			height: 30px;
			margin: 0 5px;
			color: rgba(255, 255, 255, 1);
			background-color: rgba(212, 48, 48, 1);
			border-radius: 18px;
			font-size: 15px;
			line-height: 30px;
			text-align: center;
		}
		.topics-modify {
			color: rgba(80, 80, 80, 1);
			background-color: #ecc711;
		}
		.topics-details {
			background-color: rgba(42, 130, 228, 1);
		}
	}
	.topics-operation-ban{
		// margin-left: 70%;
	}
}
.btnapprow{position: fixed;bottom: 100upx;left: 0px;width: 100%;z-index: 999;}
.btnapprow .btn-row{background: #fff;width: 80%;margin: 0 auto;padding-bottom: 10px;padding-top: 10px;}
.primary{
	background: #007aff;
}
</style>
